<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transparent Background / Gio.js</title>

    <!-- JQuery is not necessary, it is used for AJAX in this demo -->

    <script src="js/jquery.min.js"></script>

    <!-- must include Three.js library before Gio.js-->

    <script src="js/three.min.js"></script>

    <!-- must include the Gio.js library-->

    <script src="../build/gio.min.js"></script>

    <link rel="stylesheet" href="css/common.css">

    <style>

        body {
            background-image: url("./images/background.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        #globalArea {

            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;

        }

    </style>

</head>
<body>

<header>A demo showing the transparent background</header>

<div id="globalArea"></div>

<div class="view_source">
    <a href="https://github.com/syt123450/Gio.js/blob/master/examples/31_transparent_background.html">View Source</a>
</div>

<script>

	// get the container to hold the IO globe

	var container = document.getElementById( "globalArea" );

	// create controller for the IO globe, input the container as the parameter

    var controller = new GIO.Controller( container );

    controller.setSurfaceColor( "#81F5FD" );
    controller.setSelectedColor("#81F5FD");
    controller.setExportColor("#0A8DFF");
    controller.setImportColor("#9D12E2");
    controller.setHaloColor("#81F5FD");

    // Use setTransparentBackground API to set transparent background. 'true' means enable transparent background.

    controller.setTransparentBackground( true );

	// ask a file for the JSON data, using AJAX to load the data

	$.ajax( {

		url: "data/sampleData.json",
		type: "GET",
		contentType: "application/json; charset=utf-8",
		async: true,
		dataType: "json",
		success: function ( inputData ) {

			// if received the data, use addData() API to add the the data to the controller

			controller.addData( inputData );

			// call the init() API to show the IO globe in the browser

			controller.init();

		}

	} );

</script>

</body>
</html>